<template>
    <div class="alllogin">
        <p>{{name}}</p>
        <p class="prompt"></p>
        <div class="logo">
            <router-link to="/myself">
                <i style="margin:0.1rem" class="iconfont icon-xiangzuojiantou"></i>
            </router-link>
            <img style="width:100%;height:100%" src="../../assets/img/my-logo.png">
        </div>


        <div class="account">
            <p>
                <input  v-model="accountcontain"  placeholder="Account">
                <select style="position: absolute;margin-left: -28%;height: 4%;outline: none;border: none;color: gray;background-color:white;margin-top: 1%;" name="accountways" id="accountallways">
                <option value="@qq.com">@qq.com</option>
                <option value="@163.com">@163.com</option>
            </select>
            </p>
            <p v-show="password">
                <input v-model="passwordcontain"  type="password"   placeholder="Password">
            </p>
            <p  v-show="code">
                <input id="codecontain" v-show="code" style="width:30%" placeholder="Code">
                <button  @click="getcode()" class="codebtn">
                    发送验证码
                </button>
            </p>
            <p class="btn">
                <button @click="loginbtn()">确认</button>
            </p>
            <p style="margin-top:5%">
                <span @click="rebtn()"  style="margin-left:20%">
                    {{text}}
                </span>
                <span @click="newpassword()" style="margin-left:35%">
                    {{forgetpassword}}
                </span>
            </p>

        </div>


        <p id="three_one" style="display:none">{{threeOne}}</p>
        <!-- 判断此时点击按钮应该调用登录/注册/忘记密码这三个接口的哪一个 -->

    </div>
</template>

<script>


import axios from 'axios'

import store from '../../../store/index'

import qs  from 'qs';

import jwtDecode from 'jwt-decode'


import  {mapState} from 'vuex'

export default {
    
    store,

    name:'Login',
    data(){
            return{
                accountcontain:"",
                passwordcontain:"",
                password:true,
                code:false,
                text:"去注册",
                forgetpassword:'忘记密码',
                threeOne:'login',
                name:''
            };
    },

    props:['Password','UserName'],
    computed: {
        ...mapState(['token'])
    },
    methods: {
        loginbtn(){
            // let token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpbWciOiJodHRwczovL2ltZy56Y29vbC5jbi9jb21tdW5pdHkvMDE0NjBiNTdlNGE2ZmEwMDAwMDEyZTdlZDc1ZTgzLnBuZ0AxMjgwd18xbF8yb18xMDBzaC5wbmciLCJzZXgiOiLnlLciLCJyb2xlcyI6InVzZXIiLCJmb2xsb3dlZSI6IjAiLCJ1c2VySWQiOiIyNyIsImZhbnMiOiIwIiwicGFzc3dvcmQiOiIzZTZjN2QxNDFlMzIxODljOTE3NzYxMTM4YjAyNmI3NCIsInNjaG9vbCI6IiIsIm5pY2tuYW1lIjoi5oiR5pivIiwic3RhdGUiOiLmraPluLgiLCJleHAiOjE2NDY2NTY4MjAsImFnZSI6IjAiLCJ1c2VybmFtZSI6IjE0Mjg4NjE3MzZAcXEuY29tIn0.mlBP6DT2nXH2RG-7nDxUt8dPRF10W_WvCD_8dSmUboc'
            // sessionStorage['token']=token
            // const decode =  jwtDecode(token);
            // this.$router.push('/myself');
            // this.global.localSocket(decode.userId)//连接ws
            //登录有问题的时候，用的这个，不要删！！！



            //后面
            var threeone = document.getElementById("three_one").innerHTML
            /*准备工作 */
            var accountallways = document.getElementById("accountallways");
            var index=accountallways.selectedIndex 
            var uri=accountallways.options[index].value;
            var newflag =encodeURIComponent(uri)
            console.log(newflag)
            var codecontain  = document.getElementById("codecontain").value
            /*判断 login register newpassword */
            if(threeone=="login"){
               console.log(newflag);
                /*调用登录接口 */
                axios({
                    headers: {
                        'Authentication-Token':''
                    },
                    url:`/users/login?flag=${newflag}&password=${this.passwordcontain}&username=${this.accountcontain}`,
                    method:'post',
                    // data:{
                    //     password:'Ad123456789',
                    //     flag:newflag,
                    //     username:'2794095812'
                    // },
                }).then(data => {
                    console.log("11111")
                    console.log(data)
                    if(data.data.code==20000){
                        console.log(data.data.token)//获取到token  存储起来
                        // //session存储token
                        // sessionStorage.clear()
                        sessionStorage['token']=JSON.stringify(data.data.token)///////////下次部署要改成data.data.token
                        // //vue中用于解析token获取用户信息
                        const decode =  jwtDecode(data.data.token);
                        // console.log(decode)
                        //vuex存储token
                        this.$store.commit('setToken', data.data.token);
                        // console.log("22222222222233333333333333")
                        // this.$store.commit('setToken',data.data.token)

                        this.global.localSocket(decode.userId)//连接ws
                        this.$router.push('/myself');
                    }else{
                        console.log("2222222222")
                        console.log("11111")
                        var prompt = document.getElementsByClassName("prompt")[0];
                        prompt.style.display="block";
                        setTimeout(function(){
                            prompt.style.display="none";
                        },3000);
                        prompt.innerText = data.data.data;
   
                    }

                })
                // }).catch(err => {
                //     console.log(err)
                // })
                
            }else if(threeone=="register"){
                /*调用注册接口 */

            //调用注册的接口
            axios({
                    url:`/users/register?flag=${newflag}&password=${this.passwordcontain}&username=${this.accountcontain}&code=${codecontain}`,
                    method:'post',
                    headers: {
                        'Authentication-Token':''
                    },
                })
                .then(data => {
                    if(data.data.code==20000){
                        console.log("注册成功")
                        // 注册成功之后返回登录页面
                        //  this.$router.push('/login');
                        this.$router.go(0)

                    }else{
                        console.log(data.data.data)
                        var prompt = document.getElementsByClassName("prompt")[0];
                        prompt.style.display="block";
                        setTimeout(function(){
                            prompt.style.display="none";
                        },3000);
                        prompt.innerText = data.data.data;
                    }
                })
                .catch(err => {
                    console.log(err)
                })
            }else{
            /*调用忘记密码接口 */
            var accountallways = document.getElementById("accountallways");
            var index=accountallways.selectedIndex 
            var uri=accountallways.options[index].value;
            var newflag =encodeURIComponent(uri)
            console.log(newflag)
            axios({
                    url:`/users/forgetPassword?flag=${newflag}&password=${this.passwordcontain}&username=${this.accountcontain}&code=${codecontain}`,
                    method:'put',
                    headers: {
                        'Authentication-Token':''
                    },
                })
                .then(data => {
                    console.log(data)
                    if(data.data.code==20000){
                        console.log("找回密码成功")
                        //找回密码成功进行重新登录页面
                         this.$router.go(0)
                        
                    }else{
                        console.log(data)
                        console.log(data.data.data)
                    }
                })
                .catch(err => {
                    console.log(err)
                })
            }


        },
        //登录与注册的变化
        rebtn(){
            if(this.text=="去注册"){
                this.forgetpassword="忘记密码"
                console.log(this.text)
                this.text="去登录"
                this.code=true;
                this.threeOne='register'
            }else{
                this.forgetpassword="忘记密码"
                this.threeOne='login'
                this.text="去注册"
                this.code=false;
            }
        },
        //忘记密码的操作
        newpassword(){
            if(this.forgetpassword=="去注册"){
                this.code=true;
                this.threeOne='register'
                console.log("111")
                this.forgetpassword="去登录"
            }else if(this.forgetpassword=="忘记密码"){
                    this.code=true;
                    this.threeOne='newpassword'
                console.log("133")
                if(this.text=="去登录"){
                    console.log("1212")
                    this.forgetpassword="去注册"
                }else{
                    this.code=true;
                    console.log("2121")
                    this.forgetpassword="去登录"
                }
            }else{
                console.log("8888888888888888888888888")
                this.threeOne='login'
                console.log(this.threeOne)
                console.log("7889")
                this.forgetpassword="忘记密码"
                this.code=false;
            }
            

        },

        //获取验证码的操作
        getcode(){
            var codebtn  = document.getElementsByClassName("codebtn")[0];
            console.log(codebtn.innerHTML)
            /*获取验证码的定时器！*/
            var countDownNumber = 300;
            var countDownTimer;
            function countDownFunction() {
                if (countDownNumber == 0) {
                    codebtn.innerHTML = "重新发送";
                    countDownNumber = 300;
                    clearInterval(countDownTimer);
                    codebtn.disabled = false;
                    clearInterval(countDownTimer);
                } else {    
                    countDownNumber--;
                    console.log(countDownNumber)
                    codebtn.innerHTML = countDownNumber + "s";
                    codebtn.disabled = true;
                }
            }
            //获取成功之后设置一个倒计时  五分钟内不可点击  

                    var accountallways = document.getElementById("accountallways");
                    console.log(accountallways)
                    var index=accountallways.selectedIndex 
                    console.log(accountallways.options[index].value)
                    var uri =accountallways.options[index].value
                    var newflag =encodeURIComponent(uri)
                    console.log(newflag)
                //获取验证码的接口
                axios({
                    url:`/sendEmail/sendAuthCodeEmail?flag=${newflag}&email=${this.accountcontain}`,
                    method:'post',
                    data:{
                        // email:this.accountcontain,
                        // flag:accountallways.options[index].value,
                    },
                    headers: {
                        'Authentication-Token':''
                    },
                }).then(data => {
                        console.log(data)

                        if(data.data.code==20000){
                            console.log("获取验证码成功")
                            countDownTimer = setInterval(function () {
                                countDownFunction();
                            }, 1000);
                        }else{
                            var prompt = document.getElementsByClassName("prompt")[0];
                            prompt.style.display="block";
                            setTimeout(function(){
                                prompt.style.display="none";
                            },3000);
                            prompt.innerText = data.data.data;
                            console.log(data.data.message)
                        }
                }).catch(err => {
                    console.log(err)
                    console.log("接口未成功")
                })

        },
    },
    mounted() {
        // 获取params传递过来的参数
        this.name=this.$route.params.name
    },





}
</script>

<style lang="less" scoped>
*{
    padding: 0;
    margin: auto;
}
html,body,.alllogin{
    height: 100%;
}
    .logo{
        width: 100%;
        height: 60%;
        
    }
    .account{
        .btn{
            button{
                margin-top: 5%;
                text-align: center;
                border: none;
                border-radius: 0.2rem;
                padding: 0.2rem;
                width: 65%;
                margin-left: 20%;
                background-color: rgb(236 189 26);
                color:white;
            }

        }
        p{
            .codebtn{
                float: right;
                margin-right: 15%;
                padding: 0.2rem;
                border: none;
                background-color: rgb(236 189 26);
                color: white;
            }
            height: 50px;
            input{
                border-radius: 0.2rem;
                padding: 0.2rem;
                margin-left: 20%;
                width: 60%;
                border: 3px solid rgb(245 245 247);
            }
            span{
                display: inline-block;
            }
        }
    }


.prompt{
    display: none;
    text-align: center;
    padding: 10px;
    width: 250px;
    height: 30px;
    position: fixed;
    top: 0; left:15%;
    border-radius:5px;
    background: rgb(205 164 49);
    z-index: 5000;
    color:white;
} 
</style>